<template>
  <div class="wrapper">
    <!--  header部分  -->
    <header>
      <button class="back-arrow" @click="goBack"></button>
      <p>我的钱包</p>
    </header>

    <ul class="k1">
      <li class="balance">
        <img src="../assets/m1.png" alt="图片" class="m1">
        <p class="p1" >我的余额</p>
        <p class="p2">{{  "1,000,000,000" }}</p>
        <!--  virtualWallet.money  -->
      </li>

      <li class="in">
        <img src="../assets/m2.png" alt="图片" class="m2">
        <p class="p3">我的积分</p>
        <p class="p4">{{ "10,000,000,000" }}</p>
      </li>
      <!--  integral.count  -->
    </ul>

    <div class="k2">
      <ul class="form-box">
        <li>
          <div class="title">
            交易金额:
          </div>
          <div class="content">
            <input type="number" v-model.number="num" placeholder="充值/提现金额(元)">
          </div>
        </li>
      </ul>

      <ul class="JY">
        <li class="button-recharge">
          <img src="../assets/m3.png" alt="图片" class="m3">
          <button>充值</button>
        </li>
        <li class="button-take">
          <img src="../assets/m4.png" alt="图片" class="m4">
          <button >提现</button>
        </li>
        <li class="button-list">
          <img src="../assets/m5.png" @click="toList" alt="图片" class="m5">
          <button @click="toList">记录</button>
        </li>
      </ul>
    </div>

    <div class="k3">
      <ul class="form-box">
        <li>
          <div class="title">
            积分兑换:
          </div>
          <div class="content">
            <input type="number" v-model.number="nc" placeholder="兑换积分数量:10或100">
          </div>
        </li>
      </ul>

      <ul class="JY">
        <div class="count-list">
          <img src="../assets/m6.png" alt="图片" class="m6">
          <button @click="">兑换</button>
        </div>
        <div class="count-list">
          <img src="../assets/m7.png" alt="图片" class="m7">
          <button @click="">明细</button>
        </div>
      </ul>
      
    </div>
    <!-- 底部菜单部分 -->

  </div>
</template>

<script>
import Footer from '../components/Footer.vue';
import request from '../request.js';
export default {
  name: 'Wallet',
  data() {
    return {
      user: {},
      virtualWallet: {},
      num: '',
      integral: {},
      nc: '',
      EffectiveIntegral:''
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
  },
  methods: {
    goBack() {
				console.log('Trying to go back...');
                this.$router.go(-1); // 相当于浏览器的后退操作
                },
    toList(){
      this.$router.push({ path: '/charts' });
    },

  },
  components: {
    Footer
  }
}
</script>


<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/***************************************header部分**/
.wrapper header {
  width: 100%;
  height: 12vw;
  background: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .introduction {
  font-size: 3.8vw;
  padding-left: 5vw;
  margin-top: 37vw;
  padding-top: 5vw;
  padding-bottom: 10vw;
  /*background: linear-gradient(#F37373, #F3B373, #F3F373);*/
  color: #ABB2B9;
}


.wrapper .k1 {
  width: 98%;
  height: 35vw;
  margin-left: 4px;

  margin-top: 14vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /*把两行当成整体居中 align-items各自居中*/
  align-content: center;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}

.wrapper .k2 {
  width: 98%;
  height: 35vw;
  margin-left: 4px;

  border-radius: 5px;
  background: white;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}

.wrapper .k3 {
  width: 98%;
  height: 35vw;
  margin-left: 4px;

  border-radius: 5px;
  background: white;
  box-shadow: 0 0 20px #D5D8DC;

  user-select: none;
  /*鼠标悬浮变成手的样式*/
  cursor: pointer;
}


.m1 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m2 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m3 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m4 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m5 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m6 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.m7 {
  width: 12vw; /* 设置图片宽度 */
  height: auto; /* 自动计算高度，保持图片比例 */
}

.wrapper .k1 .balance {
  width: 50%;
  height: 20vw;
  margin-top: 7vw;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}


.wrapper .k1 .balance p1 {
  font-size: 4vw;
  margin-top: 2vw;
  color: #000;
}

.wrapper .k1 .balance p2 {
  font-size: 4vw;

  color: #EF92C0;
}


.wrapper .k1 .in {

  width: 50%;
  height: 22vw;
  margin-top: 7vw;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.wrapper.k1 .in p3 {
  font-size: 4vw;
  margin-top: 3vw;
  color: #000;

}

.wrapper .k1 .in p4 {
  font-size: 4vw;
  margin-top: 1vw;
  color: #568;

}

/********************交易金额与积分兑换及其输入区域********************/


.wrapper .form-box {
  width: 100%;
  margin-top: 3vw;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  display: flex;
  align-items: center;
}

.wrapper .form-box li .title {
  flex: 0 0 22vw;
  font-size: 4vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box li .content {
  flex: 1;
}

.wrapper .form-box li .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 4vw;

}


/********************按键区域********************/


.wrapper .JY {
  width: 100%;

  background-color: white;
  display: flex;

  justify-content: center;
  flex-direction: row;

}

.wrapper .JY .button-recharge {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .button-recharge button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .JY .button-take {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .button-list {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .count-list {
  width: 100%;
  height: 18vw;
  margin-top: 2vw;
  margin-bottom: 2vw;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .JY .button-take button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .JY .button-list button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

.wrapper .JY .count-list button {
  width: 15vw;
  height: 10vw;
  font-size: 4vw;
  font-weight: 500;
  color: #666;
  background-color: #ffffff;
  border-radius: 4px;
  border: none;
  outline: none;
}

   /****************** 返回键 ******************/
 
   .back-arrow {
  position: fixed; /* 固定定位 */
  left: 2.5vw; /* 距离屏幕左端像素 */
  top: 2.5vw; /* 距离屏幕顶部像素 */
  width: 8vw; /* 使用视口宽度的百分比 */
  height: 8vw; /* 使用视口宽度的百分比，保持宽高比 */
  background-color: rgba(0, 151, 255, 0.5); /* 半透明的背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none; /* 隐藏边框 */
  transition: background-color 0.3s ease; /* 背景颜色变化动画 */
}

.back-arrow::before {
  content: '\f053'; /* 使用 FontAwesome 的左箭头图标 */
  font-family: 'FontAwesome'; /* FontAwesome 字体 */
  font-size: 5vh; /* 使用视口高度的百分比，确保在不同设备上也合适 */
  color: #fff; /* 字体颜色 */
  transition: color 0.3s ease; /* 字体颜色变化动画 */
}

.back-arrow:hover::before {
  color: #0a2ddc; /* 鼠标悬停时的颜色变化 */
}

.back-arrow:hover {
  background-color: rgba(0, 151, 255, 0.3); /* 鼠标悬停时的背景颜色变化为更透明 */
}

</style>
